<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="/vue.js"></script>
</head>

<body>
    <div class="wrap" id="app">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" v-model="username" /></p>
            <p>年龄<input id="age" type="text" value="21" v-model="age" /></p>
            <p>性别
                <select id="gender" v-model="sex">
                    <option value="1">男</option>
                    <option value="0">女</option>
                    <option value="3">你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" @click="add" />
                <input type="button" value="排序" id="sortBtn" @click="sort" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr style="text-align: center;" v-for="(item,key) in arr">
                    <td>{{item.username}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.sex}}</td>
                    <td><button @click="del(key)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                sex:1,
                username:"",
                age:"",
                arr:[],
            

            },
            methods:{
                add(){
                    // console.log(this.username,this.age,this.sex);
                    if(this.sex==1){
                        xingbie="男";
                    }else if(this.sex==0){
                        xingbie="女";
                    }else{
                        xingbie="你猜";
                    }
                    let res = {username:this.username,age:this.age,sex:xingbie};
                    this.arr.push(res);
                },
                sort(){
                    this.arr.sort(function(a,b){
                        return a.age-b.age;
                    })
                },
                del(key){
                    console.log(key);    
                    // console.log(this.arr);
                    //   remove( this.arr.item[id]);  
                    this.arr.splice(key,1);
              
                 
                }
            }
        })



     
    </script>
</body>

</html>